﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="~/Scripts/bootstrap/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap/jquery-2.1.4.js"></script>
    <script src="~/Scripts/jquery.signalR-1.1.4.js"></script>
    <script src="~/Scripts/bootstrap/bootstrap-3.3.6.js"></script>
    <script src="~/signalr/hubs"></script>
</head>
<body>
    <div class="container" style="margin-top: 10px">
        <div class="row">
            <div class="col-md-9">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        聊天室
                    </div>
                    <div id="div_msgbody" class="panel-body" style='min-height: 500px; max-height: 500px; overflow: auto; max-width: 850px;'>
                        <div id="div_msg" style='word-wrap: break-word; word-break: break-word;'></div>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-md-11">
                                <div class="input-group">
                                    <span class="input-group-addon">内容：</span>
                                    <input id="message" type="text" class="form-control" maxlength="500" placeholder='在此输入聊天内容' />
                                </div>
                            </div>
                            <div class="col-md-1">
                                <button id="btn_Send" type="button" class="btn btn-info">发送</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        用户列表
                    </div>
                    <div class="panel-body" style='min-height: 500px; max-height: 500px; overflow: auto;'>
                        <div id="div_member"></div>
                    </div>
                    <div class="panel-footer">
                        <div style="height: 34px; height: 34px; line-height: 34px">
                            人员总数：<label id="lab_total">0</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var userNickName;//昵称
        var notification;//消息

        jQuery(document).ready(function () {
            //没有用户名弹出输入框
            while (!userNickName) {
                userNickName = window.prompt("请输入昵称！");
            }

            var chatHub = $.connection.ChatRoomHub;//对应后台的类ChatHub

            //添加用户
            chatHub.client.NotifyUserEnter = function (nickName, users) {
                buildUserTemplate(users);
            }

            //用户离开
            chatHub.client.NotifyUserLeft = function (nickName, users) {
                buildUserTemplate(users);
            }

            //处理消息内容
            chatHub.client.NotifySendMessage = function (nickName, message) {
                var userAvatar = 'http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/29.gif';
                //判断消息归属
                if (nickName == userNickName) {
                    $("#div_msg").append("<div style='text-align:right;'>"
                    + "<div float:right> <span style='margin-right:10px'>" + nickName + "</span>"
                     + "<img src='" + userAvatar + "' style='height:30px;width:30px;position:relative'/>"
                    + "<div class='demo clearfix fr'>"
                    + "<span class='triangle'></span>"
                    + "<div class='article' style='word'>" + message
                    + "</div></div></div></div><div class='clear-float'/>");
                }
                else {
                    $("#div_msg").append("<div>"
                     + "<img src='" + userAvatar + "' style='height:30px;width:30px;position:relative'/>"
                     + "<span style='left:10px;position:relative'>" + nickName + "</span>"
                     + "<div class='demo clearfix'>"
                     + "<span class='triangle'></span>"
                     + "<div class='article'>" + message
                     + "</div></div></div>");
                }
                //消息弹出框
                if (Notification.permission == "granted") {
                    notification = new Notification(nickName, {
                        body: message,
                        icon: userAvatar,
                        renotify: true,
                        tag: 1,
                        noscreen: true
                    });

                    notification.onclick = function () {
                        notification.close();
                    };
                } else if (Notification.permission != "denied") {
                    Notification.requestPermission(function (permission) {
                        notification = new Notification(nickName, {
                            body: message,
                            icon: userAvatar,
                            renotify: true,
                            tag: 1,
                            noscreen: true
                        });

                        notification.onclick = function () {
                            notification.close();
                        };
                    });
                }
                var objDiv = document.getElementById("div_msgbody");
                objDiv.scrollTop = objDiv.scrollHeight;
            }

            $.connection.hub.start().done(function () {
                chatHub.server.userEnter(userNickName);
            });

            //聊天框发送消息
            $("#message").keydown(function (event) {
                if (event.keyCode == 13) {
                    if ($("#message").val() != "") {
                        chatHub.server.sendMessage(userNickName, $("#message").val());
                        $("#message").val("");
                    }
                }
            });

            //发送按钮
            $("#btn_Send").click(function () {
                if ($("#message").val() != "") {
                    chatHub.server.sendMessage(userNickName, $("#message").val());
                    $("#message").val("");
                }
            });

            //用户列表
            function buildUserTemplate(users) {
                $("#lab_total").text(users.length);
                var userTemplate = "<ul style='list-style:none;'>"
                $.each(users, function (e, v) {
                    var userAvatar = 'http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/29.gif';
                    userTemplate += "<li style='padding-top:5px;'>"
                        + "<img class='round-img-list' src='" + userAvatar + "'/>"
                        + "<label style='color:#666666;margin-left:10px'>" + v.NickName + "</label>"
                        + "</li>";
                });

                userTemplate += "</ul>";

                $("#div_member").html(userTemplate);
            }
        });
    </script>
</body>
</html>